<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
  <h1>注册页面</h1>
  <!--异步请求：千万不要在action=“”上加请求地址-->
  <form action="">
      <input type="text" name="username" placeholder="用户名" @blur="check()">{{info}}<br>
      <input type="text" name="password" placeholder="密码"><br>
      <input type="text" name="nickname" placeholder="昵称"><br>
      <input type="button" value="注册" @click="reg()"><br>
  </form>
<!--引入axios和vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
      let v = new Vue({
          el:"form",
          data:{
              info:""
          },
          methods:{
              check:function () {
                  //获取表单数据
                  let data = new FormData(document.querySelector("form"));
                  axios.post("/check",data).then(function (res) {
                      v.info=res.data==1?"用户名可用":"用户名不可用";
                  })
              },
              reg:function () {
                  //获取表单数据
                  let data = new FormData(document.querySelector("form"));
                  //发起异步请求
                  axios.post("/reg",data).then(function (res) {
                      if(res.data==1){
                          alert("注册成功");
                          location.href="/";
                      }else{
                         alert("用户名不可用");
                      }
                  })
              }
          }
      })


  </script>


</body>
</html>